<template>
  <div class="passport-container">
    <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    <div class="change-loginmode">
      <van-button
        icon="arrow"
        @click="onChangeLoginMode"
      >
        {{loginModeText}}
      </van-button>
    </div>

    <van-action-sheet
      v-model="showAction"
      :actions="actions"
      @select="onActionSelect"
      description="请选择你遇到的问题"
    />
  </div>
</template>

<script>
import {
  Row,
  Col,
  Cell,
  Button,
  CellGroup,
  Form,
  Field,
  Area,
  Icon,
  Image,
  Popup,
  ActionSheet,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [ActionSheet.name]: ActionSheet,
    Lazyload
  },

  data () {
    return {
      mobile: '',
      password: '',
      code: '',
      sms: '',
      showAction: false,
      loginMode: false,
      loginModeText: '手机验证码登录',
      actions: [{ name: '忘记密码' }, { name: '找回帐号' }],
      countdown: 0,
      errors: null,
      disableSendSms: true,
      disableSubmit: false,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号码'
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: '请输入正确的11手机号码'
          }
        ],
        password: [{ required: true, message: '请输入验证码' }],
        captcha: [{ required: true, message: '请输入验证码' }]
      }
    }
  },

  created () {
    this.onLoad()
  },
  watch: {
    loginMode: {
      handler (cv, ov) {
        this.loginModeText = cv ? '密码登录' : '手机验证码登录'
      },
      deep: true
    }
  },
  computed: {
    disableSend () {
      return this.disableSendSms || this.countdown > 0
    }
  },

  methods: {
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
      this.errors = errorInfo.errors
    },
    showActionSheet () {
      this.showAction = true
    },
    onActionSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showAction = false
      this.$toast(item.name)
    },
    onChangeLoginMode () {
      this.loginMode = !this.loginMode
    },
    changeSendBtnStatus (value) {
      if (/^[1][3-9][0-9]{9}$/.test(value)) {
        this.disableSendSms = false
      } else {
        this.disableSendSms = true
      }
    },
    onLoad () {},
    onSubmit (data) {
      console.log('submit', data)
      this.disableSubmit = true
      this.$http.passport.login(data).then(res => {
        if (res.data) {
          this.$router.replace({ name: 'member' })
        } else {
          this.$toast('提交失败~')
          this.disableSubmit = false
        }
      })
    },
    sendMobileCode () {
      this.$http.base
        .sendSmsCode({
          mobile: this.mobile,
          scope: 'login'
        })
        .then(response => {
          if (response.data) {
            this.$toast('发送成功')
            this.countdown = 60
            this.countdownSubtract()
          } else {
            this.$toast('发送失败')
          }
        })
    },
    countdownSubtract () {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1
          this.countdownSubtract()
        }, 1000)
      }
    },
    /**
     * 清除验证提示
     * @param attrs
     */
    resetField (attrs) {
      attrs = !attrs
        ? Object.keys(this.errorMsg)
        : Array.isArray(attrs)
          ? attrs
          : [attrs]
      attrs.forEach(attr => {
        this.errorMsg[attr] = ''
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.passport-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
}

.passport-form {
  padding-top: 15px;
  /deep/ .van-field__label {
    width: auto;
    margin-right: 5px;
  }
  &-action {
    padding: 30px 15px;
    width: 100%;

    .van-button--default {
      background-color: #e3c184;
      border-color: #e3c184;
      color: #805916;
      border-radius: 5px;
    }
  }
}
.change-loginmode {
  text-align: center;
  .van-button--default {
    border: none;
    background: none;
    color: #805916;
    padding: 0;
    height: auto;
    line-height: initial;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  .van-button:active::before {
    opacity: 0;
  }
}
.van-cell-group {
  margin-bottom: 10px;
}

.passport-notice {
  padding: 20px 15px;
  .van-cell {
    border-radius: 30px;
    background: #fcfaed;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 24px;
    &__left-icon {
      color: #ff5544;
    }
    &__right-icon {
      color: #f1b249;
    }
    &__title {
      color: #6d511f;
    }
    &__value {
      color: #f1b249;
    }
  }
}
.passport-privilege {
  h1 {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7d5609;
    small {
      font-weight: normal;
      opacity: 0.9;
    }
    &::before,
    &::after {
      content: "";
      width: 3px;
      height: 10px;
      background: #dfc087;
      margin: 0 10px;
      border-radius: 3px;
      transform: rotate(30deg);
    }
  }
  &-list {
    flex-wrap: wrap;
    padding: 5px;
    .van-col {
      padding: 10px 5px;
      text-align: center;
      font-weight: 300;
    }
  }
}
</style>
